<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>答题页面</title>
    <link th:href="@{/animate.min.css}" rel="stylesheet">
    <link th:href="@{/Bootstrap/css/bootstrap.css}" rel="stylesheet">

    <style>
        #line {
            border-bottom: 1px solid #eee;
            padding: 5px;
            margin-bottom: 30px;
        }
    </style>

</head>
<body style="background-color:#EEEEEE">
<div style="position: absolute;left: 0;right: 0;top: 0;bottom: 0">
    <div class="animated fadeIn" style="display: flex;justify-content: center;padding: 20px;">
        <div
                style="width: 80%;background-color: #fff;border: solid#E0E0E0 1px;border-radius: 10px;box-shadow: 0 0
        10px #E0E0E0;padding:20px">
            <div style="padding: 15px;">
                <span id="questionBody" style="font-size: 30px">
<!--                jq语句插入-->
                </span>
            </div>
            <div id="line"></div>
            <div>
                <div style="padding: 10px;border: solid white" id="A">
                    <input type="radio" value="A" id="xA" name="answer">
                    <label for="xA" style="margin-left: 5px;font-size:20px">A
                        <span id="choiceA" style="font-weight: normal;margin-left: 10px;font-size: 20px">
                        <!--                jq语句插入-->
                    </span>
                    </label>
                </div>
            </div>
            <div>
                <div id="B" style="padding: 10px;border: solid white">
                    <input type="radio" value="B" id="xB" name="answer">
                    <label for="xB" style="margin-left: 5px;font-size:20px">B
                        <span id="choiceB" style="font-weight: normal;margin-left: 10px;font-size: 20px">
                        <!--                jq语句插入-->
                    </span>
                    </label>
                </div>
            </div>
            <div>
                <div id="C" style="padding: 10px;border: solid white">
                    <input type="radio" value="C" id="xC" name="answer">
                    <label for="xC" style="margin-left: 5px;font-size:20px">C
                        <span id="choiceC" style="font-weight: normal;margin-left: 10px;font-size: 20px">
                        <!--                jq语句插入-->
                    </span>
                    </label>
                </div>
            </div>
            <div>
                <div id="D" style="padding: 10px;border: solid white">
                    <input type="radio" value="D" id="xD" name="answer">
                    <label for="xD" style="margin-left: 5px;font-size:20px">D
                        <span id="choiceD" style="font-weight: normal;margin-left: 10px;font-size: 20px">
                        <!--                jq语句插入-->
                    </span>
                    </label>
                </div>
            </div>

            <div style="margin-top: 40px;display: flex">
                <div>
                    <button id="next" disabled value="下一题" style="margin: 8px;width: 120px" type="button"
                            class="btn btn-primary">下一题
                    </button>
                </div>
                <div>
                    <button id="showHint" style="outline: none;margin: 8px;width: 120px" type="button"
                            class="btn btn-warning">查看解析
                    </button>
                </div>
                <div>
                    <button onclick=window.location='/student/logout'; id="end" style="margin: 8px"
                            type="button" class="btn btn-danger">不学了
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="HintPage" class="animated fadeIn" style="display: none;justify-content: center;padding: 20px;">
        <div
                style="width: 80%;background-color: #fff;border: solid#E0E0E0 1px;border-radius: 10px;box-shadow: 0 0
        10px #E0E0E0;padding:25px">
            <strong style="font-size: 18px">题目解析：</strong>
            <span id="hint" style="font-weight: normal;margin-left: 10px;font-size: 18px">
                      <!--jq语句填入-->
            </span>

        </div>
    </div>

</div>

<script th:src="@{/Bootstrap/js/jquery-1.11.2.js}"></script>
<script th:src="@{/Bootstrap/js/bootstrap.js}"></script>
<script>

    let correct = null;

    function timer(time) {
        var btn = $("#next");
        btn.attr("disabled", true);  //按钮禁止点击
        btn.val(time);
        var hander = setInterval(function () {
            if (time <= 0) {
                clearInterval(hander); //清除倒计时
                btn.val("下一题");
                return false;
            } else {
                btn.val("" + (time--) + "");
            }
        }, 1000);
    }

    $(function () {
        loadQuestions();
        $("#showHint").click(showHint);
        let nextBtn = $("#next");
        $("input[name='answer']").click(enableBtn);
        nextBtn.click(submitAndNext);
        $("input[name='end']").click(function () {

        });
    });

    function showHint() {
        $("div[id='HintPage']").css("display", "flex");
    }

    function enableBtn() {
        var btn = $("#next");
        btn.prop("disabled", false);
    }

    function loadQuestions() {
        $("div[id='A']").css("border", "solid white");
        $("div[id='B']").css("border", "solid white");
        $("div[id='C']").css("border", "solid white");
        $("div[id='D']").css("border", "solid white");
        $("input[type='radio']").removeAttr('checked');
        $("span").empty();
        $("div[id='HintPage']").css("display", "none");
        let questionBody = $("#questionBody");
        let choiceA = $("#choiceA");
        let choiceB = $("#choiceB");
        let choiceC = $("#choiceC");
        let hint = $("#hint");
        let choiceD = $("#choiceD");
        $.get("/student/getQuestions", null, function (resp) {
            if (resp.code < 0) {
                alert(resp.msg);
            } else {
                let questions = resp.data;
                console.log(resp.data);
                console.log(questions.questionBody);
                correct = questions.correct;
                console.log("正确答案" + correct);
                questionBody.html(questions.questionBody);
                choiceA.html(questions.choiceA);
                choiceB.html(questions.choiceB);
                choiceC.html(questions.choiceC);
                choiceD.html(questions.choiceD);
                hint.html(questions.hint);

            }
        }, "json")
    }

    function submitAndNext() {
        let right = $("div[id='" + correct + "']");
        let selected = $('input[name="answer"]').filter(":checked").parent("div");
        let chose = $('input[name="answer"]').filter(":checked").val();
        console.log("选中" + chose);
        console.log("right" + right);
        console.log(selected);
        right.css("border", " solid #25BB9B");

        setTimeout(() => run(), 2500);
        timer(2);

        async function run() {
            await setTimeout;
            loadQuestions();
        }
    }

</script>

</body>
</html>